<template>
  <div class="CountBox">
    <div class="desc" @click="update(num-1)">-</div>
    <input class="num" @change="change" :value="num" type="text">
    <div class="add" @click="update(num+1)" >+</div>
  </div>
</template>

<script>
export default {
  name: 'CountBox',
  data () {
    return {

    }
  },
  props: {
    num: {
      type: Number,
      default: 1
    }
  },
  methods: {
    update (newnum) {
      if (newnum <= 0) {
        return
      }
      this.$emit('descNum', newnum)
    },
    change (e) {
      // 转数字处理
      const newNum = Number(e.target.value)
      if (isNaN(newNum)) {
        // 判断是否输入不合法文本 回退成原本的value值
        e.target.value = this.num
        return
      }
      this.$emit('descNum', newNum)
    }
  }
}
</script>

<style lang="less" scoped>
.CountBox{
    position: absolute;
    right: 10px;
    top: 5px;
    .desc{
        float: left;
        background-color: #f1f1f1;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin-right: 5px;
    }
    .num{
        float: left;
        text-align: center;
        background-color: #f1f1f1;
         border: 0;
        width: 40px;
        height: 30px;
        line-height: 30px;
        margin-right: 5px;
    }
    .add{
        float: left;
        text-align: center;
        background-color: #f1f1f1;
        width: 25px;
        height: 30px;
        line-height: 30px;
    }
}
</style>
